<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
  <div id="main" style="height: 100%"></div>
  <script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;


    option = {
      series: [
        {
          type: 'gauge',
          splitNumber: 2,
          startAngle: 180,
          endAngle: 0,
          progress: {
            show: true,
            width: 40
          },
          axisLine: {
            lineStyle: {
              width: 40,
              color: [[1, '#e1e2e5']]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true
          },
          axisLabel: {
            show: false
          },



        },
        {
          type: 'gauge',
          progress: {
            show: true,
            width: 40
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          axisTick: {
            show: true,
            splitNumber:6
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          // 将 pointer 设为 null，即不显示指针
          pointer: {
            show: false
          },
          // 将 anchor 设为 null，即不显示锚点
          anchor: {
            show: false
          },

          detail: {
            valueAnimation: false,
            fontSize: 80,
            offsetCenter: [0, 0],
            formatter: '{value}%'
          },
          title: {
            offsetCenter: [0, 250],
            fontSize: 30,
            // color:'red'
          },
          data: [
            {
              value: 70,
              name: '解决率'
            }
          ]

        }
      ]
    };

    option && myChart.setOption(option);
  </script>
</body>

</html>



font: normal 12px/1.5 PingFangSC-Regular,Microsoft Yahei,tahoma,sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
box-sizing: content-box;
border: 0;
margin: 0;
padding: 0;
color: #fff;
display: flex;
font-size: 18px;
width: 200px;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
font-weight: 700;